웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
React 앱 내부에서 사용할 컴포넌트의 태그를 다른 것으로 변경하는 방법을 알아봅니다.
# react 컴포넌트 태그를 변경, 바꾸기
예를들어 기본값은 span 태그를 사용하되 옵션으로 div 태그를 사용할 수 있도록 변경이가능한 컴포넌트를 만드는 방법입니다.
구현하기 위해서 아래와 같은 순서대로 수행하게 됩니다.
- 1. 사용할 태그 요소를 props로 받음
- 2. props가 없는 경우는 기본값 span을 사용함
- 3. 변수 Tag를 선언 후 props 값을 적용
그럼 아래에서 간단히 예제를 만들어보려 합니다.
아래 예제는 myComponent를 불러와 사용합니다. 이때 div 태그에 출력, 렌더링하려고 합니다.
@ myApp.jsx
import myComponent from '../myComponent';
...
<myComponent as={'div'} />
...
...
<myComponent as={'div'} />
...
myApp에서는 myComponent를 불러와 추가하였습니다. 이때 as 이름의 prop을 추가하고 값으로 div 값을 선언하였습니다. 즉 컴포넌트의 태그로 div를 사용하겠다는 뜻입니다.
다음으로 아래는 myComponent의 소스 코드 내용입니다.
@ myComponent.jsx
import React from 'react';
const myComponent = (props) => {
const Tag = props.as || 'span';
return (
<Tag>
props.children
</Tag>
);
};
export default myComponent;
const myComponent = (props) => {
const Tag = props.as || 'span';
return (
<Tag>
props.children
</Tag>
);
};
export default myComponent;
하위 컴포넌트 myComponent는 Tag 이름의 변수로 props.as의 값을 받아 페이지에 출력합니다. 이때 기본값은 'span'으로 설정되도록 아래와 같이 사용하였습니다.
const Tag = props.as || 'span';
여기까지 react 컴포넌트의 태그를 원하는 요소로 변경하여 웹페이지에 사용하는 방법을 알아보았습니다.
아래의 글도 찾고 계시지 않나요?
